<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
<!--    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>-->
    <TestTeleport></TestTeleport>
    <WatchTestClassCompnt ref="compRef"></WatchTestClassCompnt>
  </div>
</template>

<script lang="ts">
import { Options, Vue, setup } from 'vue-class-component'
import { ref, onMounted } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
import TestTeleport from '@/components/TestTeleport.vue'
import WatchTestClassCompnt from '@/components/WatchTestClassCompnt.vue'

const useCompRef = () => {
  return setup(() => {
    const compRef = ref<WatchTestClassCompnt|null>(null)
    onMounted(() => {
      setTimeout(() => {
        if (compRef.value) {
          // 这样才可以推断处ref指向组件的类型
          console.log('$ref:', compRef.value.Input1)
          compRef.value.alertMsg()
        }
      }, 5000)
    })
    return compRef
  })
}

@Options({
  components: {
    HelloWorld,
    TestTeleport,
    WatchTestClassCompnt
  }
})
export default class Home extends Vue {
  private compRef = useCompRef()
}
</script>
